<template>
  <BasicLayout>
    <template #wrapper>
      <el-card v-loading="loading" class="box-card">
        <el-descriptions>
          <div v-show="info.name" slot="title">姓名：{{ info.name }}</div>
          <el-descriptions-item label="注册时间">{{ parseTime(info.createdAt) }}</el-descriptions-item>
          <el-descriptions-item label="升本时间">{{ parseTime(info.shen_ben_time, '{y}-{m}') }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ info.phone }}</el-descriptions-item>
          <el-descriptions-item label="身份证号">{{ info.id_card }}</el-descriptions-item>
          <el-descriptions-item label="报考省份">{{ info.province ? info.province_region.name : '' }}</el-descriptions-item>
          <el-descriptions-item label="科别">{{ info.ke_bie }}</el-descriptions-item>
          <el-descriptions-item label="学院/系">{{ info.faculty }}</el-descriptions-item>
          <el-descriptions-item label="专业">{{ info.major }}</el-descriptions-item>
          <el-descriptions-item label="大学入学年份">{{ info.grade }}</el-descriptions-item>
          <el-descriptions-item label="大学所在班级">{{ info.college_class }}</el-descriptions-item>
          <el-descriptions-item label="学员类型">{{ info.user_type }}</el-descriptions-item>
          <el-descriptions-item label="学员等级">{{ info.user_label }}</el-descriptions-item>
          <el-descriptions-item label="学员来源">{{ info.invitation }}</el-descriptions-item>
          <el-descriptions-item label="食宿说明">{{ info.explain }}</el-descriptions-item>
          <el-descriptions-item label="集训天数">{{ info.training_days }}</el-descriptions-item>
          <el-descriptions-item label="归属大区">{{ info.province_dept ? info.province_dept.dept_name : ''
          }}</el-descriptions-item>
          <el-descriptions-item label="所属区域">{{ info.city_dept ? info.city_dept.dept_name : '' }}</el-descriptions-item>
          <el-descriptions-item label="所属教学点">{{ info.area_dept ? info.area_dept.dept_name : ''
          }}</el-descriptions-item>
          <el-descriptions-item label="推荐人">{{ info.recommenders ? info.recommenders.user_name : ''
          }}</el-descriptions-item>
          <el-descriptions-item label="上级账号">{{ info.recommender }}</el-descriptions-item>
          <el-descriptions-item label="大区经理">{{ info.regional_managers ? info.regional_managers.user_name : ''
          }}</el-descriptions-item>
          <el-descriptions-item label="区域经理">{{ info.regional_manager ? info.regional_manager.user_name : ''
          }}</el-descriptions-item>
          <el-descriptions-item label="招生老师">{{ info.admissions_officer ? info.admissions_officer.user_name : ''
          }}</el-descriptions-item>
          <el-descriptions-item label="所属班级">{{ getClass(info.class_id) }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-card class="box-card" header="购买记录" v-if="offlineOrders.length > 0 || onlineOrders.length > 0 || materialOrders.length > 0">
        <div v-if="offlineOrders.length > 0">
          <h5 style="margin: 5px">线下课程</h5>
          <el-table :data="offlineOrders" border>
            <el-table-column prop="name" align="center" label="课程名称" />
            <el-table-column prop="subject" align="center" label="科目" />
            <el-table-column prop="province" align="center" label="地区" />
            <el-table-column prop="class_type" align="center" label="课程等级" />
          </el-table>
        </div>
        <div v-if="onlineOrders.length > 0">
          <h5 style="margin: 5px">线上课程</h5>
          <el-table :data="onlineOrders" border>
            <el-table-column prop="name" align="center" label="课程名称" />
            <el-table-column prop="subject" align="center" label="科目" />
            <el-table-column prop="province" align="center" label="地区" />
          </el-table>
        </div>
        <div v-if="materialOrders.length > 0">
          <h5 style="margin: 5px">课程资料</h5>
          <el-table :data="materialOrders" border>
            <el-table-column prop="name" align="center" label="课程名称" />
            <el-table-column prop="subject" align="center" label="科目" />
            <el-table-column prop="province" align="center" label="地区" />
          </el-table>
        </div>
      </el-card>
    </template>
  </BasicLayout>
</template>

<script>
import { getStudent } from '@/api/admin/sys-student'
import { classList } from '@/api/admin/sys-course'
export default {
  name: 'SysStudentDetail',
  components: {},
  data() {
    return {
      loading: true,
      info: {},
      classList: [],
      offlineOrders: [],
      onlineOrders: [],
      materialOrders: []
    }
  },
  created() {
    this.getData()
    classList().then(response => {
      const { data } = response
      this.classList = data
    })
  },
  methods: {
    getData() {
      this.loading = true
      getStudent(this.$route.params.id)
        .then(res => {
          if (res.code !== 200) {
            this.$message.error(res.msg)
            return
          }
          this.info =
            {
              ...res.data,
              invitation: res.data.teach_recommender
                ? '教师推荐'
                : res.data.recommender
                  ? '学生推荐'
                  : '注册'
            } ?? {}
          if (res.data?.offline_orders.length > 0) {
            res.data?.offline_orders?.forEach(item => {
              item?.Course?.forEach(val => {
                this.offlineOrders.push(val)
              })
            })
          }
          if (res.data?.online_orders.length > 0) {
            res.data?.online_orders?.forEach(item => {
              item?.Course?.forEach(val => {
                this.onlineOrders.push(val)
              })
            })
          }
          if (res.data?.material_orders.length > 0) {
            res.data?.material_orders?.forEach(item => {
              item?.Material?.forEach(val => {
                this.materialOrders.push(val)
              })
            })
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    getClass(id) {
      let className = ''
      this.classList.map(item => {
        if (item?.id === id) {
          className = item?.name
        }
      })
      return className
    }
  }
}
</script>

<style scoped>
.flex-center {
  display: flex;
  align-items: center;
  justify-content: end;
}
</style>
